<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>global</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
        .nav {
            display: flex;
            /*弹性盒模型*/
            justify-content: space-around;
            /*描述子元素在主轴的排列方式。均分间距*/
            align-items: center;
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background-color: #000000;
            filter: blur(15px) contrast(30);/*高斯模糊：值   ，  对比度：颜色最好高对比*/
        }
        .content {
            width: 100px;
            height: 100px;
            background-color: #FFFFFF;
            border-radius: 50%;
            /*float: left;*/
        }
        .content:nth-child(2) {
            animation:sport 3s infinite alternate ease-in-out;/*动画：名字， 正放   倒放   时间曲线——两边快中间慢一点*/
        }
        @keyframes sport {
            /*建立content的动画*/
            from {
                box-shadow: 350px 0px 0px #FFFFFF;/*建立一个content的影子动画*/
            }
            to {
                box-shadow: -350px 0px 0px #FFFFFF;
            }
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>
</body>
</html>